﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="showMessage">

        </div>
        <div id="addMessage">
            姓名：<input type="text" name="namer" /><br>
            内容：<textarea style="height:100px;width:100%" name="content"> </textarea><br>
            <input type="button" id="sendmessage" value="发送">
        </div>
    </body>
    <script type="text/javascript">
        $(function() {
            //连接Socket的URL地址
            var wsurl = "ws://127.0.0.1:9505/Demo/socket_server.php";
            var websocket; //用于存放客户端创建的Socket对象
            if (window.WebSocket) {
                websocket = new WebSocket(wsurl);
                websocket.onopen = function(event) {
                    //onopen事件，连接成功
                    $('#showMessage').append("<p>conneted success!</p>");
                }
                websocket.onmessage = function(event) {
                    //onmessage事件，接收消息，显示在页面上
                    var msg = JSON.parse(event.data);
                    var type = msg.type;
                    var namer = msg.namer;
                    var content = msg.content;
                    if (type == 'usermsg') {
                        $('#showMessage').append("<p>" + namer + ":" + content + "</p>");
                    } else {
                        $('#showMessage').append("<p>system:" + content + "</p>");
                    }
                }
                //数据发送
                function send() {
                    var namer = $("[name='namer']").val();
                    var content = $("[name='content']").val();
                    if (namer == '') {
                        alert('请输入名称');
                        return false;
                    }
                    if (content == '') {
                        alert('请输入内容');
                        return false;
                    }
                    var msg = {
                        namer: namer,
                        content: content
                    };
                    websocket.send(JSON.stringify(msg));
                }
                $("#sendmessage").bind('click', send);
            }
        })
    </script>
</html>
